<template>
  <div id="app">

    <Layout>
        <div slot="main">

      <div class="tabs">


      <div class="tab">
          <router-link  to="/PageOne">用户列表</router-link>
      </div>
      <div class="tab active">
          <router-link  to="/PageTwo">角色列表</router-link>
      </div>
        <div class="tab">
          <router-link  to="/PageThree">权限列表</router-link>
      </div>
              
      </div>
      <router-view class="mt_10"></router-view>
        </div>
    </Layout>
    
  </div>
</template>

<script>
import Layout from "@/components/Layout";
export default {
  name: "app",
  components: {
    Layout
  },
  mounted() {
    // document.getElementById("app").style.height=window.document;
  }
};
</script>

<style>
#app {
  background-color: #f8f8f8;
  margin: 0px auto;
  height: auto;
}

.tabs {
  height: 30px;
  line-height: 30px;
  /* background-color: lightblue; */
  border-bottom: 2px lightseagreen solid;
}

.tabs .tab {
  display: inline-block;
  height: 27px;
  line-height: 28px;
  padding: 0px 10px;
  text-align: center;
  background-color: white;
  cursor: pointer;
}

.tabs .tab a {
  color: #555;
}

.tabs .tab.active,
.tabs .tab:hover {
  background-color: lightseagreen;
  color: white;
}

.tabs .tab.active a,
.tabs .tab:hover a {
  color: white;
}
</style>
